<template>
  <div class="cwy">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-row :gutter="20">
        <el-col :span="9">
          <div class="grid-content bg-purple">
            <el-form-item label="科室名称" prop="keshiName">
              <el-input v-model=" queryParams.departmentName" placeholder="科室名称"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
              <!--<el-button type="primary"  plain size="small" icon="el-icon-plus"   @click="handleAdd">添加</el-button>-->
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="observationList" border style="width:99%">
      <el-table-column prop="number" label="序号" width="50" align="center" type="index" :ixdex="indexMethod">
      </el-table-column>
      <el-table-column label="科室编号" align="center" prop="departmentNumber" width="150"/>
      <el-table-column label="科室名称" align="center" prop="departmentName" width="180"/>
      <el-table-column label="处理数" align="center" prop="departmentProcessing" width="180"/>
      <el-table-column label="提交数" align="center" prop="departmentCommits" width="180"/>
      <el-table-column label="协助数" align="center" prop="departmentAssistance" width="180"/>
      <el-table-column label="科室简介" align="center" prop="departmentProfile" width="800">
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ parseTime(scope.row.recordDate, '{y}-{m}-{d}') }}</span>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加记录对话框 -->
    <el-dialog :title="title" :visible.sync="open1" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="科室编号" prop="departmentNumber">
          <el-input v-model="form.departmentNumber"/>
        </el-form-item>
        <el-form-item label="科室名称" prop="departmentName">
          <el-input v-model="form.departmentName"/>
        </el-form-item>
        <el-form-item label="科室简介" prop="departmentProfile">
          <el-input v-model="form.departmentProfile"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
        <el-button size="small" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="科室编号" prop="departmentNumber">
          <el-input v-model="form.departmentNumber" disabled="disabled"/>
        </el-form-item>
        <el-form-item label="科室名称" prop="departmentName" >
          <el-input v-model="form.departmentName" disabled="disabled"/>
        </el-form-item>
        <el-form-item label="科室简介" prop="departmentProfile">
          <el-input v-model="form.departmentProfile" type="textarea" resize="none" :rows="4"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
        <el-button size="small" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--    <div class="block" >-->
    <!--      <el-pagination-->
    <!--        @size-change="handleSizeChange"-->
    <!--        @current-change="handleCurrentChange"-->
    <!--        :current-page="currentPage4"-->
    <!--        :page-sizes="[100, 200, 300, 400]"-->
    <!--        :page-size="10"-->
    <!--        layout="total, sizes, prev, pager, next, jumper"-->
    <!--        :total="0">-->
    <!--      </el-pagination>-->
  </div>
</template>

<script>
import {
  listDepartment,
  getDepartment,
  delDepartment,
  addDepartment,
  updateDepartment
} from "@/api/module/shao/shijian/department";
import {listData, getData, delData, addData, updateData} from "@/api/module/shao/shijian/data";

export default {
  name: "keshiguanli",
  data() {
    return {
      //序号
      xuhao: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 观察项记录表格数据
      observationList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层1
      open1: false,
      // 是否显示弹出层2
      open: false,
      // 查询参数
      queryDictParams: {
        dictType: "he_department_name",
        dictLabel: null,
        dictValue: null,
        dictSort: 0,
        cssClass: null,
        listClass: "default",
        isDefault: "N",
        status: 0
      },
      datedictList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        departmentNumber: null,
        departmentName: null,
        departmentDirectorIds: null,
        departmentDirector: null,
        departmentProcessing: null,
        departmentCommits: null,
        departmentAssistance: null,
        departmentProfile: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        creationTime: null,
        userId: null,
        deptId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        departmentNumber: [{
          required: true, message: "科室编号不能为空", trigger: "blur"
        }],
        departmentName: [{
          required: true, message: "科室名称不能为空", trigger: "blur"
        }],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 生成表头序号
    indexMethod(index) {
      return index + 1;
      this.xuhao = index + 1;
    },
    /** 查询记录列表 */
    getList() {
      this.loading = true;
      listDepartment(this.queryParams).then(response => {
        this.observationList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open1 = false;
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        departmentNumber: null,
        departmentName: null,
        departmentDirectorId: null,
        departmentDirector: null,
        departmentProcessing: null,
        departmentCommits: null,
        departmentAssistance: null,
        departmentProfile: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        creationTime: null,
        updateTime: null,
        userId: null,
        deptId: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open1 = true;
      this.title = "添加";
    },
    /** 编辑按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getDepartment(id).then(response => {
        this.form = response.data;
        this.queryDictParams.dictLabel = this.form.departmentName;
        this.queryDictParams.dictValue = this.form.departmentNumber;
        listData(this.queryDictParams).then(response => {
          this.datedictList = response.rows;
          this.queryDictParams.dictCode = this.datedictList[0].dictCode;

        });
        this.open = true;
        this.title = "编辑";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.queryDictParams.dictLabel = this.form.departmentName;
            this.queryDictParams.dictValue = this.form.departmentNumber;
            updateDepartment(this.form).then(response => {
              updateData(this.queryDictParams).then(response => {
                /* this.$store.dispatch('dict/removeDict', this.queryParams.dictType);*/
              });
              this.$modal.msgSuccess("编辑成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.queryDictParams.dictLabel = this.form.departmentName;
            this.queryDictParams.dictValue = this.form.departmentNumber;
            addDepartment(this.form).then(response => {
              addData(this.queryDictParams).then(response => {
                /*this.$store.dispatch('dict/removeDict', this.queryParams.dictType);*/
              });
              this.$modal.msgSuccess("新增成功");
              this.open1 = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      const keshiId = row.keshiId || this.keshiId;
      this.$modal.confirm('是否确认删除科室编号为"' + keshiId + '"的数据项？').then(function () {
        return delDepartment(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('project/observation/export', {
        ...this.queryParams
      }, `observation_${new Date().getTime()}.xlsx`)
    }
  }
};


</script>
<style>
.cwy {
  height: 100%;
  margin-top: 20px;
  margin-left: 20px;
}

.el-pagination {
  text-align: center;
}
</style>
